<template>
  <div class="dislike-reason">
    <div class="reasonItem">
        <span><img src="../../assets/images/dislike-reason/interest.svg" width="17"/><span>不感兴趣</span></span>
    </div>
    <div class="reasonItem">
        <span><img src="../../assets/images/dislike-reason/author.svg" width="17"/>屏蔽作者：{{author}}</span>
    </div>
    <div class="reasonItem" @click="spanLabels">
        <span><img src="../../assets/images/dislike-reason/label.svg" width="17"/>屏蔽标签</span>
        <li v-show="!isSpan" class="el-icon-arrow-down"></li>
        <li v-show="isSpan" class="el-icon-arrow-up"></li>
    </div>
    <div class="reasonItemTags" v-show="isSpan">
        <div class="labels">
            <div v-for="(item, index) in tagList" :key="'label' + index + Math.random()">
                <BlogLabel :label="item"/>
            </div>
        </div>
        <div id="firmButton"><el-button type="primary" size="small" disabled>确定屏蔽</el-button></div>
    </div>
    <div class="reasonItem">
        <span><img src="../../assets/images/dislike-reason/warning.svg" width="17"/>举报</span>
    </div>
  </div>
</template>

<script>
import BlogLabel from "./BlogLabel.vue";
export default {
    data() {
        return {
            isSpan: false,
        };
    },
    props:["tagList", "author"],
    methods: {
        spanLabels() {
            this.isSpan = !this.isSpan;
        }
    },
    mounted() {
        console.log(this.tagList)
    },
    components: { BlogLabel }
}
</script>

<style lang="less">
.dislike-reason {
    width: 200px;
    text-align: start;
    background-color: white;
    box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
    font-size: 13px;
    position: absolute;
    z-index: 2000;
    right: 0;
}
.reasonItem {
    line-height: 20px;
    height: 30px;
    padding-left: 15px;
    padding-right: 15px;
    display: flex; 
    justify-content: space-between;
    align-items: center;

    span {
        display: flex;
        align-items: center;
    }
    img {
        margin-right:  10px;
    }
}
.reasonItem:hover {
    // background-color: #fafafa;
    background-color: #f2f3f5;
    cursor: pointer;
}

.reasonItemTags {
    padding-left: 15px;
    padding-right: 15px;
    margin-top: 5px;;
    .labels {
        display: flex; 
        // justify-content: space-between;
        align-items: center;
        flex-wrap: wrap;
    }
    #firmButton {
        justify-content: center;
        display: flex;
        align-items: center;
    }
    button {
        padding-top: 5px !important;
        padding-bottom: 5px !important;
        margin: 5px;
        width: 120px;
    }
}
</style>